<template>
	<view class="last">
		<view class="text">
			猜你喜欢
		</view>
		<view class="scroll-outer2">
			<view class="item-outer" v-for="item in NavData3" :key="item._id">
				<image class="main-img" :src="item.coverpic" mode=""></image>
				<view>
					<view class="item-text-one">{{item.name}}</view>
					<view class="item-text">
						<view class="left">
							<text class="grey">{{item.collections}}</text>
							<image class="img-one" src="../../../static/vip/eye.png" mode=""></image>
						</view>
						<view class="right">
							<text class="grey">{{item.pageview}}</text>
							<image class="img-one" src="../../../static/vip/star.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['NavData3']
	}
</script>

<style scoped>
	.last {
		margin-left: 32rpx;
		margin-right: 32rpx;
	
	}
	.scroll-outer2 {
		display: flex;
		flex-wrap: wrap;
		margin-top: 28rpx;
		justify-content: space-between
	}
	.item-outer {
		width: 49%;
		margin-bottom: 20rpx;
	
	}
	.main-img {
		width: 95%;
		height: 220rpx;
		border-radius: 10rpx;
	}
	
	.item-text-one {
		font-size: 25rpx;
		font-weight: bold;
		width: 300rpx; //设置需要固定的宽度
		white-space: nowrap; //不换行
		text-overflow: ellipsis; //超出部分用....代替
		overflow: hidden; //超出隐藏
	}
	.item-text {
		display: flex;
	}
	.grey {
		color: rgb(177, 177, 177);
		font-size: 10px;
		vertical-align: middle;
	
	}
	
	.right {
		margin-left: 64rpx;
	}
	
	.img-one {
		width: 25rpx;
		height: 25rpx;
		vertical-align: middle;
		margin-left: 10rpx;
	}
	.text{
		margin-top: 20rpx;
	}
</style>
